<template>
  <div class="bill">
    <header class="page-header">
      账单管理
    </header>
    <div class="btn-group">
      <el-button type="primary">新增借款人</el-button>
    </div>
    <el-form :inline="true"  class="billSearch">
      <el-form-item label="名字">
        <el-input v-model="billSearch.name" placeholder="输入借款人姓名"></el-input>
      </el-form-item>
      <el-form-item label="手机">
        <el-input v-model="billSearch.phone" placeholder="输入借款人手机"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="success" @click="billSearchHandle">查询</el-button>
      </el-form-item>
    </el-form>

    <el-table :data="billData" border style="width: 100%">
      <el-table-column fixed  prop="name" label="店主"> </el-table-column>
      <el-table-column prop="phone" label="电话"> </el-table-column>
      <el-table-column prop="total" label="总借款"> </el-table-column>
      <el-table-column fixed="right" label="操作" width="100">
        <template slot-scope="scope">
            <el-button type="text" size="small" @click="billDataVisible = true">查看借款详情</el-button>
        </template>
      </el-table-column>
    </el-table>

     <el-dialog title="订单详情" :visible.sync="billDataVisible" :modal-append-to-body="false">
      <el-table :data="bills">
        <el-table-column property="money" label="金额"></el-table-column>
        <el-table-column property="time" label="时间"></el-table-column>
        <el-table-column property="desc" label="事由"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="returnMoneyHandle">还清此笔借款</el-button>
            <el-popover
              @hide="resetReturnMoney"
              placement="top-start"
              :title="'还一部分'"
              width="300"
              trigger="click">
              <el-form :inline="true">
                <el-input v-model="returnMoney.partMoney" placeholder="输入要还多少"></el-input>
              </el-form>
              <el-button type="text" size="small" slot="reference">还一部分</el-button>
            </el-popover>
            <el-popover
              @hide="resetReturnMoney"
              placement="top-start"
              :title="'增加借款'"
              width="300"
              trigger="click">
              <el-form :inline="true">
                <el-form-item label="金额">
                  <el-input v-model="addBill.name" placeholder="输入金额"></el-input>
                </el-form-item>
                <el-form-item label="时间">
                  <el-input v-model="addBill.time" placeholder="选择时间"></el-input>
                </el-form-item>
                <el-form-item label="事由">
                  <el-input v-model="addBill.desc" placeholder="输入事由"></el-input>
                </el-form-item>
              </el-form>
              <el-button type="text" size="small">确认增加</el-button>
              <el-button type="text" size="small" slot="reference">增加借款</el-button>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "bill",
  data() {
    return {
      billDataVisible:false,
      billSearch: {
        name: "",
        phone: ""
      },
      billData: [
        {
          id: 0,
          name: "陈麻子",
          phone: "13888888888",
          total: 388
        },
        {
          id: 1,
          name: "赵麻子",
          phone: "13888888888",
          total: 388
        },
        {
          id: 2,
          name: "王麻子",
          phone: "13888888888",
          total: 388
        }
      ],
      bills: [
        {
          money: 100,
          billsId: 0,
          time: "2018-4-20 17:52",
          desc: "中华烟两包没给钱"
        },
        {
          money: 6,
          billsId: 2,
          time: "2018-3-19 13:14",
          desc: "保宁醋一瓶没给钱"
        },
        {
          money: 23,
          billsId: 3,
          time: "2018-3-19 13:14",
          desc: "软云一包没给钱"
        }
      ],
      returnMoney:{
        partMoney:''
      },
      addBill:{
        money:'',
        time:'',
        desc:''
      }
    };
  },
  methods: {
    billSearchHandle() {},
    resetReturnMoney() {
      this.returnMoney = {
        partMoney:''
      }
      this.addBill = {
        time:'',
        desc:'',
        money:''
      }
    },
    returnMoneyHandle() {}
  }
};
</script>

<style lang="scss">
.bill {
  .btn-group,
  .billSearch {
    text-align: center;
    margin-top: 20px;
  }
}
</style>